﻿@page "/Splitter"

@using FluentUI.Demo.Shared.Pages.Splitter.Examples

<PageTitle>@App.PageTitle("Splitter")</PageTitle>

<h1>Splitter</h1>

<p>
    The purpose of this component is to have two panels of arbitrary content in a horizontal or vertical layout. 
    The user can drag the splitter to resize the panels.
</p>

<h2 id="example">Examples</h2>

<DemoSection Component="typeof(SplitterDefault)" Title="Default">
    <Description>
        <p>
            The default splitter has two panels with a 50% width and can work both in a horizontal as a vertical orientation. The 
            <code>FluentSplitter</code> has an <code>OnSizeChanged</code> EventCallback that can be used to connect an action to a resize event.
            See the 'Razor' tab for the code
        </p>
    </Description>
</DemoSection> 
   
<DemoSection Component="typeof(SplitterNested)" Title="Nested splitters">
    <Description>
        <p>
            Splitters can be nested to create more complex layouts. 
        </p>
    </Description>
</DemoSection>

<DemoSection Component="typeof(SplitterCustomSizes)" Title="Custom sizes for panels" />

<DemoSection Component="typeof(SplitterCollapse)" Title="Collapse Splitter">
    <Description>
        <p>
            The <code>FluentSplitter</code> component has a <code>Collapsed</code> parameter that can be set to hide the splitter bar
            and the contents of Panel2. This can be useful for things like a Summary/Detail view where you don't always want the splitter
            to be visible.
        </p>
    </Description>
</DemoSection>

<DemoSection Component="typeof(SplitterBarHandle)" Title="Hide the bar handle">
    <Description>
        <p>
            You can hide the bar handle by setting <code>ShowBarHandle</code> to false.
        </p>
    </Description>
</DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentSplitter)" />
<ApiDocumentation Component="typeof(SplitterResizedEventArgs)" />
